<template>
	<view class="container">
		<u-gap height="16"></u-gap>
		<view class="formBox" >
			<view class="line" v-for="(item,index) in TripListtwo" :key="index">
				<view class="line-title">用户姓名：</view>
				<u--text :size="26" color="#999999"  :text="item.username"></u--text>
			</view>
			<view v-if="TripList!=null">
			<view class="line">
				<view class="line-title">居住地址：</view>
				<u--text :size="26" color="#999999" :text="TripList.address"></u--text>
			</view>
			<view class="line">
				<view class="line-title">行程信息：</view>
					<view style="font-size: 26rpx;color:#999999">{{TripList.startArea}}</view>
					--
					<view style="font-size: 26rpx;color:#999999">{{TripList.endArea}}</view>
			</view>
			<view class="line">
				<view class="line-title">交通工具：</view>
				<u--text :size="26" color="#999999" :text="TripList.tool"></u--text>
			</view>
			<view class="line">
				<view class="line-title">交通班次：</view>
				<u--text :size="26" color="#999999" :text="TripList.number"></u--text>
			</view>
			<view class="line">
				<view class="line-title">行程时间：</view>
				<view style="font-size: 26rpx;color:#999999">{{TripList.startTime}}</view>
				-
				<view style="font-size: 26rpx;color:#999999">{{TripList.endTime}}</view>
			</view>
			<u-gap height="16"></u-gap>
			</view>
	</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		name: '',
		components: {},
		data() {
			return {
				id:null,
				TripList:null,
				TripListtwo:null,
				healthStatusName:null
				
			}
		},
		onLoad(option){
			this.id=option.id
			this.gettripDetails()
			this.getTripListone()
		},
		methods: {
			// 获取行程详情
			gettripDetails(){
				api.getmyTrip({
					id:this.id,
					}).then(res=>{
					this.TripList=res.data.data
				})
			},
			// 获取行程列表
			getTripListone(){
				api.getTrip({
					id:this.id,
					}).then(res=>{
					console.log(res.data)
					this.TripListtwo=res.data.rows
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 0 16rpx;
	}
	.trip-num {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
.title-left{
	width:60rpx;
}
	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;

		.line-btn {
			justify-content: space-around;
		}

		.line {
			display: flex;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;

			.line-title {
				width: 200rpx;
				font-size: 28rpx;

			}
		}
	}

	.bottomBtn {
		position: fixed;
		width: calc(100% - 63rpx);
		padding: 32rpx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 1rpx 8rpx 0rpx #e5e5e5;
	}
</style>
